<template>
    <el-dialog
            title="流程上传"
            :visible.sync="dialogVisible"
            width="420px"
    >
        <el-alert
                title="使用说明"
                type="warning"
                description="上传完整流程图,(不支持成品)"
                show-icon
                close-text="知道了"
        >
        </el-alert>
        <br/>
        <!--一个高亮显示的插件-->
        <el-upload
          class="flow-upload"
		  ref="upload"
          drag
          action=""
          :multiple="false"
		  :file-list="fileList"
		  :limit = "1"
		  :auto-upload="false"
		  :on-change="handleChange"
		  :on-exceed="handleExceed"
		  
		  >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip"></div>
        </el-upload>
		<div class="ef-node-info-btn-area" style="margin-top:15px;">
			<el-button type="primary" icon="el-icon-document-copy" @click="cancel">取消</el-button>
			<el-button type="primary" icon="el-icon-edit-outline" @click="confirmUpload">确定</el-button>
		</div>
    </el-dialog>
</template>

<script>

    export default {
        props: {
            
        },
        data() {
            return {
                dialogVisible: false,
				files:null,
				fileList:[]
            }
        },
        
        methods: {
            cancel() {
                this.dialogVisible = false
				
            },
			show(){
				this.files = null;
				if(this.$refs.upload){
					this.$refs.upload.clearFiles();
				}
				this.dialogVisible = true
			},
			
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleExceed(files, fileList){
				
			},
			handleChange(files, fileList) {
				this.files = files;
			},
			confirmUpload(){
				if(!this.files){
					//this.$message.warning("请上传流程文件");
					this.$alert("请上传流程文件");
					return;
				}
				this.$emit('flowUploadFile',this.files);
				this.dialogVisible = false;
			}
        }
    }
</script>
